<template>
  <div class="search_layout">
    <div class="layout_header">
      <div class="page_w layout_header_main">
        <div class="left_box">
          <a
            href="javascript:;"
            class="left_title">
            <img
              src="../../assets/img/logo_1.e54ae31.png"
              alt="" />
            <h1>共创云</h1>
          </a>
          <div class="mid_nav">
            <a href="javascript:;">服务产品</a>
            <a href="javascript:;">科创需求</a>
            <a href="javascript:;">专利论文</a>
            <a href="javascript:;">交易大数据</a>
          </div>
        </div>
        <div class="right_login_box">
          <div class="login_box">
            <el-button type="primary">登录</el-button>
            <el-button>注册</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="resource_search">
      <div class="panel page_w">
        <div class="panel_header">
          <div class="title_box">
            <img
              src=""
              alt=""
              style="margin-right: 16px" />
            <p class="header_label">资源大厅</p>
          </div>
          <div class="search_box">
            <el-input
              placeholder="请输入资源名称或用户名搜索"
              v-model="listParams.keywords">
              <template #append>
                <el-button
                  :icon="Search"
                  @click="getList">
                  搜索
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
        <div class="panel_tabs">
          <div class="tabs_item active">
            <p>服务</p>
          </div>
          <!-- <div class="tabs_item">
            <p>需求</p>
          </div>
          <div class="tabs_item">
            <p>科创资源</p>
          </div> -->
        </div>
        <div class="panel_main">
          <div class="panel_condition">
            <!-- 服务类型 -->
            <div
              class="condition"
              style="height: 40px">
              <p class="condition_label">服务类型：</p>
              <div
                class="condition_list"
                @click="e => clickHander(e, 'serviceTypeId')">
                <p
                  :class="{
                    condition_list_item: true,
                    selected: !listParams.serviceTypeId
                  }"
                  data-id="">
                  不限
                </p>
                <p
                  :class="{
                    condition_list_item: true,
                    selected: listParams.serviceTypeId === ladder.id
                  }"
                  v-for="ladder in ladderList"
                  :data-id="ladder.id"
                  :key="ladder.id">
                  {{ ladder.name }}
                </p>
              </div>
              <div
                class="condition_switch"
                @click="changeMore(0)">
                <p>更多</p>
                <el-icon style="display: none"><ArrowUp /></el-icon>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
            <div class="divider"></div>
            <template v-if="ladderList2.length > 0">
              <!-- 二级分类 -->
              <div
                class="condition"
                style="height: 40px">
                <p class="condition_label">二级分类：</p>
                <div
                  class="condition_list"
                  @click="e => clickHander(e, 'serviceTypeId2')">
                  <p
                    :class="{
                      condition_list_item: true,
                      selected: !listParams.serviceTypeId2
                    }"
                    data-id="">
                    不限
                  </p>
                  <p
                    :class="{
                      condition_list_item: true,
                      selected: listParams.serviceTypeId2 === ladder.id
                    }"
                    v-for="ladder in ladderList2"
                    :data-id="ladder.id"
                    :key="ladder.id">
                    {{ ladder.name }}
                  </p>
                </div>
                <div
                  class="condition_switch"
                  @click="changeMore(0)">
                  <p>更多</p>
                  <el-icon style="display: none"><ArrowUp /></el-icon>
                  <el-icon><ArrowDown /></el-icon>
                </div>
              </div>
              <div class="divider"></div>
            </template>
            <!-- 技术领域 -->
            <div
              class="condition"
              style="height: 40px">
              <p class="condition_label">技术领域：</p>
              <div
                class="condition_list"
                @click="e => clickHander(e, 'technicalId')">
                <p
                  :class="{
                    condition_list_item: true,
                    selected: !listParams.technicalId
                  }"
                  data-id="">
                  不限
                </p>
                <p
                  :class="{
                    condition_list_item: true,
                    selected: listParams.technicalId === item.id
                  }"
                  :data-id="item.id"
                  v-for="item in list"
                  :key="item.id">
                  {{ item.name }}
                </p>
              </div>
              <div
                class="condition_switch"
                @click="changeMore(1)">
                <p>更多</p>
                <el-icon style="display: none"><ArrowUp /></el-icon>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
            <div class="divider"></div>
            <!-- 数据来源 -->
            <div
              class="condition"
              style="height: 40px">
              <p class="condition_label">数据来源：</p>
              <div
                class="condition_list"
                @click="e => clickHander(e, 'dataOrigin')">
                <p
                  :class="{
                    condition_list_item: true,
                    selected: !listParams.dataOrigin
                  }"
                  data-id="">
                  不限
                </p>
                <p
                  :class="{
                    condition_list_item: true,
                    selected: listParams.dataOrigin === item.key
                  }"
                  :data-id="item.key"
                  v-for="item in dataOrigin"
                  :key="item.id">
                  {{ item.name }}
                </p>
              </div>
              <div
                class="condition_switch"
                @click="changeMore(2)">
                <p>更多</p>
                <el-icon style="display: none"><ArrowUp /></el-icon>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
            <div class="divider"></div>
            <!-- 地区 -->
            <div
              class="condition"
              style="height: 40px">
              <p class="condition_label">地区：</p>
              <div
                class="condition_list"
                @click="e => clickHander(e, 'province')">
                <p
                  :class="{
                    condition_list_item: true,
                    selected: !listParams.province
                  }"
                  data-id="">
                  不限
                </p>
                <p
                  :class="{
                    condition_list_item: true,
                    selected: listParams.province === item
                  }"
                  :data-id="item"
                  v-for="item in province"
                  :key="item">
                  {{ item }}
                </p>
              </div>
              <div
                class="condition_switch"
                @click="changeMore(3)">
                <p>更多</p>
                <el-icon style="display: none"><ArrowUp /></el-icon>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
          </div>
          <div class="result">
            <div class="result_header">
              <div
                class="result_header_item"
                style="flex: 420px">
                服务名称
              </div>
              <div
                class="result_header_item"
                style="flex: 440px; padding-left: 80px">
                发布用户
              </div>
              <div
                class="result_header_item"
                style="flex: 300px">
                服务类型
              </div>
              <div
                class="result_header_item"
                style="flex: 200px">
                成功成交数
              </div>
              <div
                class="result_header_item"
                style="flex: 180px">
                信用评价
              </div>
            </div>
            <div class="result_body">
              <div
                class="result_body_item"
                v-for="item of searchResult"
                :key="item.id">
                <div
                  class="item_col col_1"
                  style="flex: 1 1 420px">
                  <p
                    :title="item.title"
                    class="tw-text-[16px] tw-font-bold">
                    {{ item.title }}
                  </p>
                </div>
                <div
                  class="item_col col_2"
                  style="flex: 1 1 440px">
                  <img
                    :src="
                      item.avatarUrl
                        ? item.avatarUrl
                        : 'https://test.nttcc.com.cn/_nuxt/img/default_avatar.442622a.png'
                    "
                    alt="" />
                  <p class="tw-text-[16px] tw-font-bold">
                    {{ item.orgName }}
                  </p>
                </div>
                <div
                  class="item_col col_3"
                  style="flex: 1 1 300px">
                  <p>{{ item.serviceTypeName }}</p>
                </div>
                <div
                  class="item_col col_4"
                  style="flex: 1 1 200px">
                  <p class="tw-text-[16px] tw-font-bold">
                    {{ item.totalDeal }}
                  </p>
                </div>
                <div
                  class="item_col col_5"
                  style="flex: 1 1 180px">
                  <p class="tw-text-[16px] tw-font-bold">{{ item.avgScore }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel_pagination">
          <el-pagination
            v-model:current-page="listParams.pageNum"
            v-model:page-size="listParams.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="totalPage"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios, { AxiosResponse } from 'axios'
import type {
  LadderlistData,
  GetLadderRespenseDate,
  GetListResponse,
  GetListParams,
  ListData,
  DataOrigin,
  Province,
  GetServiceListResponse,
  ServiceData
} from './types'

// 数据
const ladderList = ref<LadderlistData[]>([])
const ladderList2 = ref<LadderlistData[]>([])
const list = ref<ListData[]>([])
const dataOrigin = ref<DataOrigin[]>([
  {
    id: 1,
    name: '共创云',
    key: 'nttcc'
  },
  {
    id: 2,
    name: '科惠网',
    key: '51kehui'
  },
  {
    id: 3,
    name: '江西省网上常设技术市场',
    key: 'jxstc'
  },
  {
    id: 4,
    name: '潇湘科技要素大市场',
    key: 'hntpe'
  }
])
const province = ref<Province>([
  '湖北省',
  '湖南省',
  '江西省',
  '北京市',
  '天津市',
  '河北省',
  '山西省',
  '内蒙古自治区',
  '辽宁省',
  '吉林省',
  '黑龙江省',
  '上海市',
  '江苏省',
  '浙江省',
  '安徽省',
  '福建省',
  '山东省',
  '河南省',
  '广东省',
  '广西壮族自治区',
  '海南省',
  '重庆市',
  '四川省',
  '贵州省',
  '云南省',
  '西藏自治区',
  '陕西省',
  '甘肃省',
  '青海省',
  '宁夏回族自治区',
  '新疆维吾尔自治区',
  '台湾省',
  '香港特别行政区',
  '澳门特别行政区'
])
const listParams = ref<GetListParams>({
  pageNum: 1,
  pageSize: 10,
  keywords: '',
  serviceTypeId: '',
  serviceTypeId2: '',
  technicalId: '',
  province: '',
  dataOrigin: '',
  logicStatus: 1
})

// 监听服务类型,修改二级分类
watch(
  () => listParams.value.serviceTypeId,
  val => {
    // 判断是否有值
    if (val) {
      // 修改二级分类
      ladderList2.value =
        ladderList.value.find(item => item.id === val)?.children || []
    } else {
      ladderList2.value = []
    }
    // 搜索参数置空
    listParams.value.serviceTypeId2 = ''
  }
)

// 搜索结果
const searchResult = ref<ServiceData[]>([])

// 总页数
const totalPage = ref(0)

// 获取结果数据
const getList = async () => {
  const { data } = await axios.get<any, AxiosResponse<GetServiceListResponse>>(
    'https://service.test.nttcc.com.cn/api/v1/service/list',
    {
      params: listParams.value
    }
  )
  if (data.code === 0) {
    searchResult.value = data.data.list
    totalPage.value = data.data.total
  }
}

// 点击标签获取数据
const clickHander = (e: MouseEvent, key: string) => {
  // 判断点击的是不是p标签
  if ((e.target as HTMLElement).tagName.toLocaleLowerCase() === 'p') {
    // 获取点击的p标签
    const el = e.target as HTMLParagraphElement
    const id = el.dataset.id
    if (id !== undefined) {
      ;(listParams.value as any)[key] = id
      getList()
    }
  }
}

// 分页事件
const handleCurrentChange = (val: number) => {
  listParams.value.pageNum = val
  getList()
}

// 初始化
const init = async () => {
  const { data } = await axios.get<any, AxiosResponse<GetLadderRespenseDate>>(
    'https://service.test.nttcc.com.cn/admin/api/v1/service_type/ladderlist'
  )
  if (data.code === 0) {
    ladderList.value = data.data
  }
  const { data: data2 } = await axios.get<any, AxiosResponse<GetListResponse>>(
    'https://service.test.nttcc.com.cn/api/v1/technical/list'
  )
  if (data2.code === 0) {
    list.value = data2.data.list
  }
  await getList()
}

// 更多
const changeMore = (key: number) => {
  const el = document.querySelectorAll('.condition')[key] as HTMLDivElement
  const conditionSwitch = el.querySelector(
    '.condition_switch p'
  ) as HTMLParagraphElement
  const elIcon = el.querySelectorAll(
    '.condition_switch i'
  ) as NodeListOf<HTMLElement>
  elIcon[0].style.display = elIcon[0].style.display === 'none' ? '' : 'none'
  elIcon[1].style.display = elIcon[1].style.display === 'none' ? '' : 'none'
  el.style.height = el.style.height === '40px' ? 'auto' : '40px'
  conditionSwitch.innerText =
    conditionSwitch.innerText === '更多' ? '收起' : '更多'
}

init()
</script>

<style lang="less" scoped>
.search_layout {
  width: 100%;
  min-width: 1240px;
  .layout_header {
    width: 100%;
    height: 50px;
    .layout_header_main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      .left_box {
        display: flex;
        align-items: center;
        .left_title {
          display: flex;
          align-items: center;
          margin-right: 50px;
          > img {
            width: 30px;
            height: 30px;
            -o-object-fit: cover;
            object-fit: cover;
            margin-right: 10px;
          }
          > h1 {
            font-size: 16px;
            font-weight: 700;
            line-height: 22px;
            color: #3473e6;
          }
        }
        .mid_nav {
          display: flex;
          align-items: center;
          > a {
            &:hover {
              color: #3473e6;
            }
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            color: #606266;
            cursor: pointer;
          }
          > a + a {
            margin-left: 20px;
          }
        }
      }
      .right_login_box {
        display: flex;
        align-items: center;
        .login_box {
          display: flex;
          button {
            cursor: pointer;
          }
          > button:first-child {
            width: 64px;
            height: 32px;
            background: #3473e6;
            border-radius: 4px;
            color: #fff;
          }
          > button:last-child {
            width: 64px;
            height: 32px;
            background: #fff;
            border: 1px solid #90b7f1;
            border-radius: 4px;
            color: #3473e6;
          }
        }
      }
    }
  }
  .resource_search {
    width: 100%;
    background-color: #f6f7f8;
    padding: 30px 0;
    .panel {
      padding: 30px;
      background: #fff;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      overflow: auto;
      .panel_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 40px;
        margin-bottom: 20px;
        .title_box {
          display: flex;
          height: 22px;
          align-items: center;
          > p {
            font-size: 16px;
            font-weight: 700;
            line-height: 22px;
            color: #303133;
          }
        }
        .search_box {
          width: 540px;
          .el-input {
            width: 100%;
            height: 40px;
            .el-input-group__append {
              .el-button {
                width: 92px;
                height: 40px;
                background: #3473e6;
                border-radius: 4px;
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
                color: #fff;
              }
            }
          }
        }
      }
      .panel_tabs {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 30px;
        margin-bottom: 10px;
        background: #f7f8f9;
        border-radius: 4px;
        .tabs_item {
          position: relative;
          cursor: pointer;
          line-height: 20px;
          padding: 14px 6px;
          color: #303133;
          &.active,
          &:hover {
            color: #3473e6;
          }

          &::after {
            width: 0;
            content: '';
            position: absolute;
            left: 50%;
            bottom: 8px;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background-color: #3473e6;
            border-radius: 2px;
            transition: all 0.3s ease;
          }
          &.active:after,
          &:hover:after {
            width: 100%;
          }
          &:not(:last-child) {
            margin-right: 120px;
          }

          > p {
            font-size: 14px;
            font-weight: 700;
          }
        }
      }
      .panel_main {
        min-height: 100px;
        .panel_condition {
          width: 100%;
          padding: 0 20px;
          margin-bottom: 30px;
          background: #fff;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
        }
        .condition {
          display: flex;
          overflow: hidden;
          margin-bottom: 10px;
          .condition_label {
            width: 120px;
            line-height: 30px;
            padding-left: 10px;
            margin-top: 10px;
            color: #909399;
            font-size: 14px;
          }
          .condition_list {
            flex: 1;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-right: 74px;
            .condition_list_item {
              cursor: pointer;
              line-height: 20px;
              padding: 5px 10px;
              margin-right: 10px;
              margin-top: 10px;
              border-radius: 2px;
              color: #303133;
              &.selected,
              &:hover {
                color: #fff;
                background-color: #3473e6;
              }
            }
          }
          .condition_switch {
            display: flex;
            align-items: center;
            cursor: pointer;
            width: 48px;
            height: 30px;
            margin-top: 10px;
            color: #3473e6;
            > i {
              margin-left: 4px;
            }
          }
        }
        .divider {
          width: 100%;
          height: 1px;
          border-top: 1px dashed #dcdfe6;
        }
        .result {
          padding: 10px 0;
          .result_header {
            width: 100%;
            height: 48px;
            padding: 0 20px;
            background: #f7f8f9;
            border-radius: 4px;
            font-weight: 700;
            align-items: center;
            display: flex;
            .result_header_item {
              color: #909399;
              height: 100%;
              padding: 0 20px;
              align-items: center;
              display: flex;
            }
          }
          .result_body {
            margin-top: 10px;
            .result_body_item {
              padding: 0 20px;
              display: flex;
              margin-bottom: 10px;
              cursor: pointer;
              position: relative;
              width: 100%;
              height: 80px;
              background: #fff;
              border-radius: 4px;
              &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                pointer-events: none;
              }
              &:hover {
                &:after {
                  border-color: #3473e6;
                  box-shadow: 0 0 6px rgba(52, 115, 230, 0.3);
                }
                .col_1 {
                  color: #3473e6;
                }
                .col_2 {
                  color: #3473e6;
                }
              }
              .item_col {
                height: 100%;
                align-items: center;
                padding: 0 20px;
                display: flex;
              }
              .col_1 {
                color: #000;
              }
              .col_2 {
                justify-content: flex-start;
                > img {
                  width: 40px;
                  height: 40px;
                  margin-right: 20px;
                }
              }
              .col_3 {
                color: #606266;
              }
              .col_4 {
                color: #f1b221;
              }
              .col_5 {
                color: #3473e6;
              }
            }
          }
        }
      }
      .panel_pagination {
        padding: 20px 0;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
